<template>
  <div class="webview">
    <div class="webview__inner" @click="show = true">
      <div class="icon">
        <el-icon><Document /></el-icon>
        <!-- <img src="/icon/chrome.png" alt="" /> -->
      </div>
      <div class="body">
        <div class="title">报告已经生成</div>
        <div class="desc">点击浏览</div>
      </div>
    </div>

    <el-dialog v-model="show" width="80%" destroy-on-close title="预览" top="5vh">
      <iframe :src="url" frameborder="0" :style="{ height: '80vh' }"></iframe>
    </el-dialog>
  </div>
</template>
<script setup>
const props = defineProps({
  url: String,
})
const show = ref(false)
</script>
<style lang="scss" scoped>
.webview {
  display: flex;
}
.webview__inner {
  display: flex;
  border: 1px solid #f0f0f0;
  min-width: 270px;
  border-radius: 6px;
  padding: 16px;
  cursor: pointer;

  .icon {
    color: #4a97f8;
    margin-right: 12px;
    font-size: 18px;
    margin-top: 2px;
    img {
      width: 18px;
      height: 18px;
    }
  }
  .title {
    flex: 1;
    font-size: 16px;
    color: #000;
    margin-bottom: 4px;
    font-weight: 500;
  }
  .desc {
    color: #999;
  }
}

iframe {
  width: 100%;
  // height: 100%;
  // height: 768px;
}

// :deep(.el-drawer__body) {
//   padding: 0;
// }
</style>
